<template>
	<div class="clues flex-row">
		<div class="clues-left">
			<div class="search-box">
				<el-input type="text" size="small" placeholder="搜索账号" v-model="sechsdkey" @input="inputC"></el-input>
			</div>
			<div class="account-list">
				<div class="item flex-row" v-for="(item,index) in testAccount" :key="index"
					:class="{'active':item.check}" @click="selectAccount(item)">
					<el-avatar :size="40" :src="item.avatar"></el-avatar>
					<div class="name flex-column jc-space-between">
						<div class="top text-over">{{item.username}}</div>
						<div class="bottom">
							<span v-if="index%5===0">抖音</span>
							<span v-else class="red">头条</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clues-right"> 
			<el-tabs type="border-card" @tab-click="handleClick" v-model="tabsValue" v-if="rightList.length > 0" closable
				@tab-remove="handleTabsEdit">
				<el-tab-pane v-for="(item,index) in rightList" :label="item.username" :name="item.username">
					<div class="nine-title">最近30天数据</div><!-- {{tabsValue}} -->
					<table class="table table-bordered custom-table">
						<tr>
							<th>视频总数量</th>
							<th>播放量</th><!-- 视频总播放量 -->
							<th>主页访问</th><!-- 点赞数量 -->
							<th>作品点赞</th><!-- 新增点赞数量 -->
							<th>作品评论</th><!-- 粉丝数量 -->
							<th>累计粉丝量</th><!-- 新增粉丝数量 -->
							<!-- <th>评论数</th>
							<th>主页访问数</th> -->
						</tr>
						<tr>
							<td>
								<el-input size="small" v-model="form.account_data.total_videos" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_data.total_video_views" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_data.total_likes" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_data.new_likes" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_data.total_fans" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_data.new_fans" placeholder="请输入"></el-input>
							</td>
							<!-- <td>
								<el-input size="small" v-model="form.account_data.total_comments" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_data.home_page_visits" placeholder="请输入"></el-input>
							</td> -->
						</tr>
					</table>
					
					<div class="nine-title">昨日数据<!-- 用户行为数据 --></div>
					<table class="table table-bordered custom-table">
						<tr>
							<th>播放量<!-- 点赞 --></th>
							<th>主页访问<!-- 昨日新增点赞 --></th>
							<th>作品点赞<!-- 取消点赞 --></th>
							<th>作品评论<!-- 昨日取消点赞 --></th>
							<th>新增粉丝<!-- 评论 --></th>
							<!-- <th>昨日新增评论</th>
							<th>关注</th>
							<th>昨日新增关注</th>
							<th>取消关注</th>
							<th>昨日取消关注</th>
							<th>私信</th>
							<th>昨日新增私信</th> -->
						</tr>
						<tr>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.likes" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.yesterday_new_likes" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.cancel_likes" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.yesterday_cancel_likes" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.comments" placeholder="请输入"></el-input>
							</td>
							<!-- <td>
								<el-input size="small" v-model="form.account_behavior_data.yesterday_new_comments" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.follow" placeholder="请输入"></el-input>
							</td>
							
							<td>
								<el-input size="small" v-model="form.account_behavior_data.yesterday_new_follow" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.cancel_follow" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.yesterday_cancel_follow" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.private_letter" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.yesterday_new_private_letter" placeholder="请输入"></el-input>
							</td> -->
						</tr>
					</table>
					
					<div class="nine-title">粉丝数据</div>
					<table class="table table-bordered custom-table" style="width: 600px;">
						<tr>
							<th>7天新增粉丝数量</th>
							<th>30天新增粉丝数量</th>
							<th>累计粉丝量</th>
						</tr>
						<tr>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.fans_7d" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.fans_30d" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input size="small" v-model="form.account_behavior_data.cumulative_fans" placeholder="请输入"></el-input>
							</td>
						</tr>
					</table>

					<div class="nine-title">
                        7天播放量数据
                        <el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success1"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
						<el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in views_list_7d.dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in views_list_7d.date_val">{{item}}</td>
                        </tr>
                    </table>

                    <div class="nine-title">
                        30天播放量数据
						<el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success1"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
                        <el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                        <!-- <el-button size="mini" type="text">表格的数据是2022年4月份</el-button>
                        <el-button size="mini" type="text">提示：（动态计算当前月有多少天）</el-button> -->
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in views_list_30d.short_dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in views_list_30d.date_val">{{item}}</td>
                        </tr>
                    </table>

                    <div class="nine-title">
                        7天点赞量数据
                        <el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success2"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
						<el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in likes_list_7d.dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in likes_list_7d.date_val">{{item}}</td>
                        </tr>
                    </table>

					<div class="nine-title">
                        30天点赞量数据
						<el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success2"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
                        <el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                        <!-- <el-button size="mini" type="text">表格的数据是2022年4月份</el-button>
                        <el-button size="mini" type="text">提示：（动态计算当前月有多少天）</el-button> -->
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in likes_list_30d.short_dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in likes_list_30d.date_val">{{item}}</td>
                        </tr>
                    </table>

                    <!-- <div class="nine-title">
                        7天分享量数据
                        <el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success3"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
						<el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in share_list_7d.dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in share_list_7d.date_val">{{item}}</td>
                        </tr>
                    </table>

                    <div class="nine-title">
                        30天分享量数据
						<el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success3"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
                        <el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                        
                    </div>
                     <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in share_list_30d.short_dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in share_list_30d.date_val">{{item}}</td>
                        </tr>
                    </table> -->

                    <div class="nine-title">
                        7天评论量数据
                        <el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
							<el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                        </el-upload>
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in comments_list_7d.dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in comments_list_7d.date_val">{{item}}</td>
                        </tr>
                    </table>

                    <div class="nine-title">
                        30天评论量数据
						 <el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-success="on_success"
                                :file-list="file_list"
                                list-type="">
                            <el-button size="mini" type="text">导入数据</el-button>
                        </el-upload>
                        <el-button size="mini" type="text">  <a style="color:#409EFF" href="https://pm.ab0769.com/数据概况导入模板.xls" target="_blank">下载导入模板</a></el-button>
                        <!-- <el-button size="mini" type="text">表格的数据是2022年4月份</el-button>
                        <el-button size="mini" type="text">提示：（动态计算当前月有多少天）</el-button> -->
                    </div>
                    <table class="table table-bordered custom-table">
                        <tr>
                            <th v-for="item in comments_list_30d.short_dates">
                               
                                <span>{{item}}</span>
                            </th>
                        </tr>
                        <tr>
                            <td class="text-center" v-for="item in comments_list_30d.date_val">{{item}}</td>
                        </tr>
                    </table>

					
					<!-- <div style="padding: 10px 0;" class="text-right">
						<el-button size="small"  type="primary">提交</el-button>
					</div> -->

					<div style="padding: 10px 0;" class="text-right" @click="sumotu()">
						<el-button size="small" type="primary">提交</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import {Message} from 'element-ui';
	import {fuzzyQuery} from '../../util/index.js'
	export default {
		data() {
			return {
				sechsdkey:'',
				squareUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				testAccount: [], // 左边列表数据
				testAccounts:[],
				rightList: [], // 右边选项卡数据
				tabsValue: '',
				form:{
					id:0,
					account_data:{},
					account_behavior_data:{}
				},
				views_list_30d:{
					date_val: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					short_dates:["03-16", "03-17", "03-18", "03-19", "03-20", "03-21", "03-22", "03-23", "03-24", "03-25", "03-26", "03-27", "03-28", "03-29", "03-30", "03-31", "04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07", "04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
				},
				views_list_7d:{
					date_val: [0, 0, 0, 0, 0, 0, 0],
					dates:["2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14"],
				},
				comments_list_30d:{
					date_val: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					short_dates:["03-16", "03-17", "03-18", "03-19", "03-20", "03-21", "03-22", "03-23", "03-24", "03-25", "03-26", "03-27", "03-28", "03-29", "03-30", "03-31", "04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07", "04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
				},
				comments_list_7d:{
					date_val: [0, 0, 0, 0, 0, 0, 0],
					dates:["2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14"],
				},
				likes_list_30d:{
					date_val: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					short_dates:["03-16", "03-17", "03-18", "03-19", "03-20", "03-21", "03-22", "03-23", "03-24", "03-25", "03-26", "03-27", "03-28", "03-29", "03-30", "03-31", "04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07", "04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
				},
				likes_list_7d:{
					date_val: [0, 0, 0, 0, 0, 0, 0],
					dates:["2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14"],
				},
				share_list_30d:{
					date_val: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					short_dates:["03-16", "03-17", "03-18", "03-19", "03-20", "03-21", "03-22", "03-23", "03-24", "03-25", "03-26", "03-27", "03-28", "03-29", "03-30", "03-31", "04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07", "04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
				},
				share_list_7d:{
					date_val: [0, 0, 0, 0, 0, 0, 0],
					dates:["2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14"],
				},
				file_list:[],
			}
		},
		mounted() {
			// this.testAccount = this.$store.state.testAccount

			this.$http.post("common/users").then((response) => {
					 this.testAccount=response.data.records.map(res=>{
						  res.check=false;
						  return res;
					 })
					 this.testAccounts=this.testAccount;
					
				});
		},
		methods: {
			inputC(e){
				if(e.length<=0){
					this.testAccount=this.testAccounts;
				}else{
					var list=fuzzyQuery(this.testAccounts,'username',e);
					this.testAccount=list;
				}
				
			},
			sumotu(){
				var path="Accounts/edit";
				this.$http.post(path,this.form).then(res=>{
					Message({ 
						type: 'success',
						message: '保存成功'
					});
				})
			},
			selectAccountold(item) { // 左边账号列表点击事件
				if (item.check) { // 点击左边的列表，只允许选中，取消的话点击右边的关闭按钮
					return false;
				}
				item.check = true;
				this.rightList.push(item);
				this.tabsValue = item.username;
			},
			handleClick(e){
			
				this.getdetail(this.rightList[e.index]['id']);
			},
			selectAccount(item) { // 左边账号列表点击事件
				if (item.check) { // 点击左边的列表，只允许选中，取消的话点击右边的关闭按钮
					return false;
				}
				item.check = true;
				this.rightList.push(item);
				this.tabsValue = item.username;
				this.getdetail(item.id);
				
			},
			getdetail(id){
				this.$http.post("accounts/detail",{id:id}).then((response) => {
					
					var datas=response.data;
					// datas.service_start_time=datas.service_start_time_text
					// datas.service_end_time=datas.service_end_time_text
					// delete datas.createtime;
					// delete datas.updatetime;
					// delete datas.service_start_time_text
					// delete datas.service_end_time_text
					// delete datas.customer_name
					this.form.id=datas.id;
					delete datas.account_data.createtime;
					delete datas.account_data.updatetime;
					this.form.account_data=datas.account_data;

					delete datas.account_behavior_data.createtime;
					delete datas.account_behavior_data.updatetime;
					this.form.account_behavior_data=datas.account_behavior_data;
					this.views_list_30d = datas.views_list_30d;
					this.views_list_7d = datas.views_list_7d;

					this.likes_list_30d = datas.likes_list_30d;
					this.likes_list_7d = datas.likes_list_7d;

					this.share_list_30d = datas.share_list_30d;
					this.share_list_7d = datas.share_list_7d;

					this.comments_list_30d = datas.comments_list_30d;
					this.comments_list_7d = datas.comments_list_7d;

				//	console.log(this.form);
					
				});
			},
			handleTabsEdit() { // 右边tabs选项卡删除事件
				console.log(1234, this.tabsValue)
				this.rightList.forEach((n, i) => {
					if (n.username === this.tabsValue) {
						// 删除以后要给tabs默认选中一个
						let nextTab = this.rightList[i + 1] || this.rightList[i - 1];
						if (nextTab) {
							this.tabsValue = nextTab.username;
						}
						this.testAccount.forEach(nn => { // 左边列表选中状态给他取消
							if (nn.username === n.username) {
								nn.check = false;
							}
						})
						this.rightList.splice(i, 1);
					}
				})
			},
			on_success1(response){
				console.log(response.data)
				// this.file_list.push({
				// 	'name':"url.jpg",
				// 	'url':response.data.fullurl,
				// });
				// this.form.avatar=response.data.fullurl;

				var path="accounts/idata";
				this.$http.post(path,{id:this.form.id,file:response.data.url,type:1}).then(res=>{
					Message({ 
						type: 'success',
						message: '导入成功'
					});

					this.getdetail(this.form.id);
				})
			},
			on_success2(response){
				console.log(response.data)
				// this.file_list.push({
				// 	'name':"url.jpg",
				// 	'url':response.data.fullurl,
				// });
				// this.form.avatar=response.data.fullurl;

				var path="accounts/idata";
				this.$http.post(path,{id:this.form.id,file:response.data.url,type:2}).then(res=>{
					Message({ 
						type: 'success',
						message: '导入成功'
					});

					this.getdetail(this.form.id);
				})
			},
			on_success3(response){
				console.log(response.data)
				// this.file_list.push({
				// 	'name':"url.jpg",
				// 	'url':response.data.fullurl,
				// });
				// this.form.avatar=response.data.fullurl;

				var path="accounts/idata";
				this.$http.post(path,{id:this.form.id,file:response.data.url,type:3}).then(res=>{
					Message({ 
						type: 'success',
						message: '导入成功'
					});

					this.getdetail(this.form.id);
				})
			},
			on_success(response){
				console.log(response.data)
				// this.file_list.push({
				// 	'name':"url.jpg",
				// 	'url':response.data.fullurl,
				// });
				// this.form.avatar=response.data.fullurl;

				var path="accounts/idata";
				this.$http.post(path,{id:this.form.id,file:response.data.url,type:4}).then(res=>{
					Message({ 
						type: 'success',
						message: '导入成功'
					});

					this.getdetail(this.form.id);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.clues {
		width: 100%;
		height: auto;

		.clues-left {
			width: 220px;
			height: calc(100vh - 66px);
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #FFF;
			margin-right: 10px;

			.search-box {
				padding: 10px;
			}

			.account-list {
				padding-bottom: 15px;

				.item {
					padding: 5px 0;
					margin-bottom: 5px;
					cursor: pointer;

					.name {
						width: calc(100% - 60px);
						margin-left: 10px;

						.top {
							font-size: 15px;
							color: #626066;
						}

						.bottom {
							color: darkblue;
							font-size: 12px;
							font-weight: bolder;
						}
					}
				}

				.active {
					background-color: #F1F3FC;
				}
			}
		}

		.clues-right {
			width: calc(100% - 230px);
			background-color: #FFF;

			.tab-pane-btns {
				margin-bottom: 16px;
			}
		}
	}
	.upload-demo{display:inline-block;}
	.el-button--mini{margin-left: 20px;}
</style>
